<template>
  <div class="project-list">
    <el-table
      :data="dataArr"
      border
      style="width: 100%">
      <el-table-column
        label="项目名称"
        width="300">
        <template slot-scope="scope">
          {{ scope.row.name }}
          <el-tag v-if="scope.row.status === 1" type="danger" size="small">已删除</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createUser.name"
        width="180"
        label="创建人">
      </el-table-column>
      <el-table-column
        prop="createTimeStr"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="description"
        label="项目描述">
      </el-table-column>
      <el-table-column
        width="80px"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="switchBtnIsShow(scope.row)" class="opt-btn" type="text" @click="switchClick(scope.row)">切换</el-button>
        </template>
      </el-table-column>
    </el-table>
    <w-pagination v-if="isSuperAdmin" ref="WPagination" :total="total" @pageChange="reloadLoad"/>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import WPagination from '@/components/global/pagination/index.vue'
  import ArticleModel from '@/models/ArticleModel'
  import { Getter } from 'vuex-class'
  import { ListType, PageDataType } from '@/models/types'
  import AccountModel from "@/models/AccountModel";
  import WPopView from '@/utils/popView'

  @Component({
    name: 'ArticleList',
    components: {
      WPagination
    }
  })
  export default class AccountList extends Vue{

    @Getter('isSuperAdmin') isSuperAdmin!: boolean
    @Getter('currentProject') currentProject?: ArticleModel
    total = 0

    dataArr: Array<ArticleModel> = []

    /**
     * 刷新数据
     */
    reloadLoad(pageData: PageDataType) {
      if (pageData.pageNum === 1) {
        this.dataArr = []
      }
      ArticleModel.loadModels<ArticleModel>(pageData).then((data: ListType<ArticleModel>) => {
        this.total = data.total
        this.dataArr = data.list
      })
    }

    /**
     * 获取当前账户下的项目列表
     */
    projectList() {
      AccountModel.projectList().then((dataArr: Array<ArticleModel>) => {
        this.dataArr = dataArr
      })
    }

    /**
     * 切换按钮是否显示
     */
    switchBtnIsShow(model: ArticleModel) {
      return model.status !== 1 && (model._id !== (this.currentProject?._id || ''))
    }

    /**
     * 进入指定的项目
     */
    async switchClick(model: ArticleModel) {
      await model.getDeatil()
      this.$store.commit('SET_PROJECT', model)
      WPopView.msgSuccess('切换成功')
    }

    mounted() {
      if (!this.isSuperAdmin) {
        this.projectList()
      }
    }
  }

</script>

<style scoped lang="scss">
.project-list {
  .opt-btn {
    padding: 0;
  }
}
</style>
